<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Awesome-pyecharts</title>
    <script src="https://assets.pyecharts.org/assets/v5/echarts.min.js" type="text/javascript"></script>

</head>
<body>
<div class="chart-container" id="9906d9882d364b8db1346e8d3f4260ec" style="width:900px; height:500px; "></div>
<script>
    var chart_9906d9882d364b8db1346e8d3f4260ec = echarts.init(
        document.getElementById('9906d9882d364b8db1346e8d3f4260ec'), 'white', {renderer: 'canvas'});
    var option_9906d9882d364b8db1346e8d3f4260ec = {
"animation": true,
"animationThreshold": 2000,
"animationDuration": 1000,
"animationEasing": "cubicOut",
"animationDelay": 0,
"animationDurationUpdate": 300,
"animationEasingUpdate": "cubicOut",
"animationDelayUpdate": 0,
"aria": {
    "enabled": false
},
"color": [
    "#5470c6",
    "#91cc75",
    "#fac858",
    "#ee6666",
    "#73c0de",
    "#3ba272",
    "#fc8452",
    "#9a60b4",
    "#ea7ccc"
],
"series": [
    {
        "type": "bar",
        "name": "GDP",
        "legendHoverLink": true,
        "data": [
            30,
            20,
            10
        ],
        "realtimeSort": false,
        "showBackground": false,
        "stackStrategy": "samesign",
        "cursor": "pointer",
        "barMinHeight": 0,
        "barCategoryGap": "20%",
        "barGap": "30%",
        "large": false,
        "largeThreshold": 400,
        "seriesLayoutBy": "column",
        "datasetIndex": 0,
        "clip": true,
        "zlevel": 0,
        "z": 2,
        "label": {
            "show": true,
            "position": "right",
            "margin": 8
        }
    }
],
"legend": [
    {
        "data": [
            "GDP"
        ],
        "selected": {}
    }
],
"tooltip": {
    "show": true,
    "trigger": "item",
    "triggerOn": "mousemove|click",
    "axisPointer": {
        "type": "line"
    },
    "showContent": true,
    "alwaysShowContent": false,
    "showDelay": 0,
    "hideDelay": 100,
    "enterable": false,
    "confine": false,
    "appendToBody": false,
    "transitionDuration": 0.4,
    "textStyle": {
        "fontSize": 14
    },
    "borderWidth": 0,
    "padding": 5,
    "order": "seriesAsc"
},
"xAxis": [
    {
        "show": true,
        "scale": false,
        "nameLocation": "end",
        "nameGap": 15,
        "gridIndex": 0,
        "inverse": false,
        "offset": 0,
        "splitNumber": 5,
        "minInterval": 0,
        "splitLine": {
            "show": true,
            "lineStyle": {
                "show": true,
                "width": 1,
                "opacity": 1,
                "curveness": 0,
                "type": "solid"
            }
        }
    }
],
"yAxis": [
    {
        "show": true,
        "scale": false,
        "nameLocation": "end",
        "nameGap": 15,
        "gridIndex": 0,
        "inverse": false,
        "offset": 0,
        "splitNumber": 5,
        "minInterval": 0,
        "splitLine": {
            "show": true,
            "lineStyle": {
                "show": true,
                "width": 1,
                "opacity": 1,
                "curveness": 0,
                "type": "solid"
            }
        },
        "data": [
            "\u4e2d\u56fd",
            "\u7f8e\u56fd",
            "\u82f1\u56fd"
        ]
    }
]
};
    chart_9906d9882d364b8db1346e8d3f4260ec.setOption(option_9906d9882d364b8db1346e8d3f4260ec);
</script>
</body>
</html>
